<template>
	<div class="btmbar">
		<div class="btmbarplay">
			<div class="bg"></div>
			<div class="updn">
				<div class="left"><a href="javascript:;"></a></div>
				<div class="right"></div>
			</div>
			<div class="hand"></div>
			<div class="warp">
				<div class="btns">
					<a
						href="javascript:;"
						@click="prvMusic"
						class="icn prv"
						title="上一首(ctrl+←)"
					></a>
					<a
						href="javascript:;"
						:class="[stop ? 'icn ply pas' : 'icn ply']"
						@click.prevent="musicto"
						title="播放/暂停(p)"
					></a>
					<a
						href="javascript:;"
						@click="nextMusic"
						class="icn next"
						title="下一首(ctrl+→)"
					></a>
				</div>
				<div class="head">
					<img
						:scr="[musicImgUrl ? musicImgUrl : '../../image/default_album.jpg']"
						alt=""
					/>
					<a href="javascript:;" class="mask"></a>
				</div>
				<div class="paly">
					<div class="words">
						<a href="javascript:;" class="name" :title="musicTitle">{{
							musicTitle
						}}</a>
						<span class="thide">
							<span :title="musicName">
								<a href="javascript:;">{{ musicName }}</a>
							</span>
						</span>
						<a href="javascript:;" class="src" title="来自专辑"></a>
					</div>
					<div class="progress">
						<div class="barbg">
							<div class="cur">
								<span class="btn"> </span>
							</div>
						</div>
						<div class="time"><em>00:00</em> / {{ time }}</div>
					</div>
				</div>
				<div class="oper">
					<a href="javascript:;" class="icn icn-pip" title="画中画歌词"></a>
					<a href="javascript:;" class="icn icn-add" title="收藏"></a>
					<a href="javascript:;" class="icn icn-share" title="分享"></a>
				</div>
				<div class="ctrl">
					<a href="javascript:;" class="icn icn-vol"></a>
					<a href="javascript:;" class="icn icn-one" title="单曲循环"></a>
					<span class="add"
						><a
							href="javascript:;"
							@click="show"
							class="icn icn-list"
							title="播放列表"
							>{{ musicInfo.length }}</a
						></span
					>
				</div>
			</div>
		</div>
		<MusicPlay :stop="stop" :musicAudUrl="musicAudUrl"></MusicPlay>
		<!-- 播放列表 -->
		<div v-if="isShow" class="playlist">
			<div class="list-header">
				<div class="listhd">
					<h4>
						播放列表
						<span>{{ musicInfo.length }}</span>
					</h4>
					<a href="" class=".addall">
						<span>收藏全部</span>
					</a>
					<a href="" class="clear">清除</a>
					<span class="lytit">{{ title }}</span>
					<span @click="show" class="close">X</span>
				</div>
			</div>

			<div class="list-content">
				<img
					class="list-imgbg"
					src="../../image/109951167161179789.jpg"
					alt=""
				/>
				<div class="msk"></div>
				<div class="play-cd">
					<ul class="f-cb">
						<li v-for="item in musicInfo" :key="item.id">
							<div class="col col-1"></div>
							<div
								class="col col-2"
								@click="Play"
								:data-imgurl="item.imgUrl"
								:data-title="item.title"
								:data-audio="item.audio"
								:data-name="item.name"
								:data-time="item.time"
								:data-id="item.id"
							>
								{{ item.title }}
							</div>
							<div class="col col-3">
								<div class="icns">
									<i
										class="ico icn-del"
										title="删除"
										@click="delMusic"
										:data-id="item.id"
										>删除</i
									><i class="ico ico-dl" title="下载">下载</i
									><i class="ico ico-share" title="分享">分享</i
									><i class="j-t ico ico-add" title="收藏">收藏</i>
								</div>
							</div>
							<div class="col col-4">
								<span :title="item.name"
									><a class="" href="/artist?id=1132392" hidefocus="true">{{
										item.name
									}}</a></span
								>
							</div>
							<div class="col col-5">{{ item.time }}</div>
						</li>
					</ul>
				</div>
				<div class="bline" id="auto-id-TlAkqmWCZfmqdh1Q">
					<span
						class="scrol"
						hidefocus="true"
						style="height: 150.893px; display: block; top: 0px"
					></span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: "BtmbarView",
};
</script>

<script setup>
import { computed, ref, watch } from "vue";
import { useStore } from "vuex";
import { musicDetail, musicUrl } from "@/api/Music";
import dayjs from "dayjs";

const store = useStore();

const musicList = computed(() => store.state.app.musicList);
const musicInfo = ref([]);
const musicAudUrl = ref("");
const musicImgUrl = ref("");
const musicTitle = ref("");
const musicName = ref("");
const musicIndex = ref("");
const time = ref("");
const stop = ref(false);

const isShow = ref(false);
const show = () => {
	isShow.value = !isShow.value;
	console.log(musicInfo.value);
};

const infoAll = async (id, index) => {
	if (!id) return;
	const data = await musicDetail(id);
	const info = {
		id: index,
		title: "",
		name: "",
		time: "",
		imgUrl: "",
		audio: "",
	};
	info.title = data.songs[0].name;
	info.name = data.songs[0].ar[0].name;
	info.imgUrl = data.songs[0].al.picUrl;
	info.time = dayjs(data.songs[0].dt).format("mm.ss");
	const Url = await musicUrl(id);
	info.audio = Url.data[0].url;
	return info;
};

const Play = (e) => {
	musicAudUrl.value = e.target.dataset.audio;
	musicImgUrl.value = e.target.dataset.imgurl;
	musicTitle.value = e.target.dataset.title;
	musicName.value = e.target.dataset.name;
	time.value = e.target.dataset.time;
	musicIndex.value = e.target.dataset.id;
	stop.value = true;
};

const musicto = () => {
	if (!musicAudUrl.value) return;
	if (!stop.value) {
		stop.value = !stop.value;
	} else {
		stop.value = !stop.value;
	}
};

const prvMusic = () => {
	musicIndex.value -= 1;
	if (musicIndex.value <= 0) {
		musicIndex.value = 0;
	}
	console.log(musicIndex.value);
	const data = musicInfo.value[musicIndex.value];
	musicAudUrl.value = data.audio;
	musicImgUrl.value = data.imgurl;
	musicTitle.value = data.title;
	musicName.value = data.name;
	time.value = data.time;
	musicIndex.value = data.id;
	stop.value = true;
};

const nextMusic = () => {
	musicIndex.value += 1;
	if (musicIndex.value >= musicInfo.value.length - 1) {
		musicIndex.value = musicInfo.value.length - 1;
	}
	console.log(musicIndex.value);
	const data = musicInfo.value[musicIndex.value];
	musicAudUrl.value = data.audio;
	musicImgUrl.value = data.imgurl;
	musicTitle.value = data.title;
	musicName.value = data.name;
	time.value = data.time;
	musicIndex.value = data.id;
	stop.value = true;
};

const delMusic = (e) => {
	store.dispatch("app/delmusic", e.target.dataset.id);
	musicInfo.value.splice(e.target.dataset.id, 1);
};

watch(
	musicList,
	(musicList) => {
		const infoList = [];
		musicList.map(async (item, index) => {
			const date = await infoAll(item, index);
			infoList.push(date);
		});
		musicInfo.value = infoList;
	},
	{
		immediate: true,
		deep: true,
	}
);
</script>

<style lang="less" scoped>
.btmbar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 0;
	z-index: 99;
	.btmbarplay {
		position: absolute;
		top: -53px;
		visibility: visible;
		left: 0;
		width: 100%;
		height: 53px;
		margin: 0 auto;
		.bg {
			height: 53px;
			zoom: 1;
			margin-right: 67px;
			background: url(../../image/playbar.png) no-repeat 0 9999px;
			background-position: 0 0;
			background-repeat: repeat-x;
		}
		.updn {
			position: relative;
			z-index: 11;
			top: -53px;
			visibility: visible;
			.left {
				position: absolute;
				top: -13px;
				right: 15px;
				width: 52px;
				height: 67px;
				background: url(../../image/playbar.png) no-repeat 0 9999px;
				background-position: 0 -380px;
				a {
					display: block;
					width: 18px;
					height: 18px;
					margin: 6px 0 0 17px;
					background: url(../../image/playbar.png) no-repeat 0 9999px;
					background-position: -100px -380px;
				}
			}
			.right {
				position: absolute;
				top: 0px;
				right: 0;
				width: 15px;
				height: 54px;
				pointer-events: none;
				background: url(../../image/playbar.png) no-repeat 0 9999px;
				background-position: -52px -393px;
			}
		}
		.hand {
			position: absolute;
			top: -10px;
			width: 100%;
			height: 20px;
			cursor: pointer;
		}
		.warp {
			position: absolute;
			left: 50%;
			top: 6px;
			z-index: 15;
			width: 980px;
			height: 47px;
			margin: 0 auto;
			margin-left: -490px;
			.btns {
				float: left;
				width: 137px;
				padding: 6px 0 0 0;
				a {
					display: block;
					float: left;
					width: 28px;
					height: 28px;
					margin-right: 8px;
					margin-top: 5px;
					background: url(../../image/playbar.png) no-repeat 0 9999px;
				}
				.prv {
					background-position: 0 -130px;
				}
				.prv:hover {
					background-position: -30px -130px;
				}
				.ply {
					width: 36px;
					height: 36px;
					margin-top: 0;
					background-position: -40px -204px;
				}
				.ply:hover {
					background-position: -40px -204px;
				}
				.pas {
					background-position: 0 -165px;
				}
				.pas:hover {
					background-position: -40px -165px;
				}
				.next {
					background-position: -80px -130px;
				}
				.next:hover {
					background-position: -110px -130px;
				}
			}
		}
		.head {
			position: relative;
			width: 34px;
			height: 34px;
			float: left;
			margin: 6px 15px 0 0;
			img {
				width: 34px;
				height: 34px;
			}
			.mask {
				position: absolute;
				top: 0px;
				left: 0px;
				display: block;
				width: 34px;
				height: 35px;
				background: url(../../image/playbar.png) no-repeat 0 9999px;
				background-position: 0 -80px;
			}
		}
		.paly {
			position: relative;
			float: left;
			width: 581px;
			.words {
				height: 28px;
				overflow: hidden;
				color: #e8e8e8;
				text-shadow: 0 1px 0 #171717;
				line-height: 28px;
				.name {
					float: left;
					max-width: 300px;
					color: #e8e8e8;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					word-wrap: normal;
				}
				.thide {
					float: left;
					max-width: 220px;
					margin-left: 15px;
					color: #9b9b9b;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					word-wrap: normal;
					a {
						color: #9b9b9b;
					}
				}
				.src {
					float: left;
					width: 14px;
					height: 15px;
					margin: 7px 0 0 13px;
					background: url(../../image/playbar.png) no-repeat 0 9999px;
					background-position: -110px -103px;
				}
			}
			.progress {
				position: relative;
				width: 466px;
				.barbg {
					height: 9px;
					background: url(../../image/statbar.png) no-repeat 0 9999px;
					background-position: right 0;
					.cur {
						position: absolute;
						top: 0;
						left: 0;
						width: 5%;
						height: 9px;
						background: url(../../image/statbar.png) no-repeat 0 9999px;
						background-position: left -66px;
						.btn {
							position: absolute;
							top: -7px;
							right: -13px;
							width: 22px;
							height: 24px;
							margin-left: -11px;
							background: url(../../image/iconall.png) no-repeat 0 9999px;
							background-position: 0 -250px;
						}
						.btn:hover {
							background-position: 0 -280px;
						}
					}
				}
				.time {
					position: absolute;
					top: -3px;
					right: -84px;
					color: #797979;
					text-shadow: 0 1px 0 #121212;
					em {
						color: #a1a1a1;
					}
				}
			}
		}
		.oper {
			float: left;
			width: 87px;
			.icn-pip {
				position: relative;
				background: url(../../image/lyrics.png) no-repeat 0 0;
			}
			.icn-pip:hover {
				background-position-y: -25px;
			}
			.icn-add {
				background-position: -88px -163px;
			}
			.icn-add:hover {
				background-position: -88px -189px;
			}
			.icn-share {
				background-position: -114px -163px;
			}
			.icn-share:hover {
				background-position: -114px -189px;
			}
		}

		.ctrl {
			position: relative;
			float: left;
			z-index: 10;
			width: 113px;
			padding-left: 13px;
			overflow: hidden;
			background: url(../../image/playbar.png) no-repeat 0 9999px;
			background-position: -147px -238px;
			.icn-vol {
				background-position: -2px -248px;
			}
			.icn-vol:hover {
				background-position: -31px -248px;
			}
			.icn-one {
				background-position: -66px -344px;
			}
			.icn-one:hover {
				background-position: -93px -344px;
			}
			.add {
				float: left;
				width: 59px;
				height: 36px;
				.icn-list {
					display: block;
					float: none;
					width: 38px;
					padding-left: 21px;
					background-position: -42px -68px;
					line-height: 27px;
					text-align: center;
					color: #666;
					text-shadow: 0 1px 0 #080707;
					text-indent: 0;
					text-decoration: none;
				}
				.icn-list:hover {
					background-position: -42px -98px;
					text-decoration: none;
				}
			}
		}
		.icn {
			float: left;
			width: 25px;
			height: 25px;
			margin: 11px 2px 0 0;
			text-indent: -9999px;
			background: url(../../image/playbar.png) no-repeat 0 9999px;
		}
	}

	// 播放列表
	.playlist {
		position: absolute;
		left: 50%;
		bottom: 47px;
		width: 986px;
		height: 301px;
		margin-left: -493px;
		background-color: #080707;
		.list-header {
			padding: 0 5px;
			height: 41px;
			background: url(@/image/playlist_bg.png) no-repeat;
			background-position: 0 0;
			h4 {
				position: absolute;
				left: 25px;
				top: 0;
				height: 39px;
				line-height: 39px;
				font-size: 14px;
				color: #e2e2e2;
			}
			a {
				position: absolute;
				left: 398px;
				top: 12px;
				height: 15px;
				line-height: 15px;
				cursor: pointer;
			}
			.clear {
				position: absolute;
				left: 490px;
				top: 12px;
				height: 15px;
				line-height: 15px;
				cursor: pointer;
			}
			.lytit {
				position: absolute;
				left: 595px;
				top: 0;
				width: 346px;
				text-align: center;
				height: 39px;
				line-height: 39px;
				color: #fff;
				font-size: 14px;
			}
			.close {
				position: absolute;
				top: 6px;
				right: 8px;
				width: 30px;
				height: 30px;
				overflow: hidden;
				color: #fff;
				text-indent: -999px;
				cursor: pointer;
				background: url(@/image/playlist.png) no-repeat 0 9999px;
				background-position: -195px 9px;
			}
		}
	}
	.list-content {
		position: absolute;
		padding: 0, 5px;
		left: 0;
		top: 41px;
		width: 976px;
		height: 260px;
		overflow: hidden;
		background: url(@/image/playlist_bg.png) no-repeat;
		background-position: -1014px 0;
		background-repeat: repeat-y;
		.list-imgbg {
			position: absolute;
			left: 2px;
			top: -360px;
			z-index: 1;
			width: 980px;
			height: auto;
			opacity: 0.2;
		}
		.msk {
			position: absolute;
			left: 2px;
			top: 0;
			z-index: 2;
			width: 558px;
			height: 260px;
			background: #121212;
			opacity: 0.5;
		}
		.play-cd {
			position: absolute;
			left: 2px;
			top: 0;
			z-index: 4;
			height: 260px;
			width: 553px;
			overflow: hidden;
			ul {
				height: 260px;
				color: #ccc;
				overflow-y: auto;
				li {
					float: left;
					width: 100%;
					.col {
						float: left;
						padding-left: 10px;
						height: 28px;
						line-height: 28px;
						overflow: hidden;
						cursor: pointer;
						.ico {
							float: right;
							overflow: hidden;
							margin: 7px 0 0 10px;
							text-indent: -9999px;
							background: url(@/image/playico.png) no-repeat;
						}
						.icn-del {
							width: 13px;
							background-position: -51px 0;
						}
						.ico-dl {
							width: 14px;
							background-position: -57px -50px;
						}
						.ico-share {
							width: 14px;
							background-position: 0 0;
						}
						.ico-add {
							width: 16px;
							background-position: -24px 0;
						}
					}
					.col-1 {
						width: 10px;
					}
					.col-2 {
						width: 256px;
					}
					.col-3 {
						width: 97px;
						height: 25px;
						position: relative;
						opacity: 0;
					}
					.col-4 {
						width: 70px;
					}
					.col-5 {
						width: 35px;
						color: #666;
					}
				}
				li:hover {
					.col-3 {
						opacity: 1;
					}
				}
			}
		}
	}
	.bline {
		position: absolute;
		left: 555px;
		top: -1px;
		z-index: 2;
		width: 6px;
		height: 260px;
		background: #000;
		opacity: 0.5;
	}
}
</style>
